<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="1000"
        :close-on-click-modal="false">
        <div>
            <el-form :inline="true" :model="formInline">
                <el-form-item label="文件编号" prop="fileCode">
                    <el-input v-model="formInline.fileCode" clearable placeholder="请输入" size="small"></el-input>
                </el-form-item>
                <el-form-item label="文件名称" prop="fileName">
                    <el-input v-model="formInline.fileName" clearable placeholder="请输入" size="small"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addFile" size="small">添加</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50"></el-table-column>
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column prop="fileCode" label="文件编号"> </el-table-column>
            <el-table-column prop="fileName" label="文件名称"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleClose">取 消</el-button>
            <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
import { v4 as uuid } from 'uuid';
import tinymce from "tinymce/tinymce";
import { saveVeriableValue, loadVaribles } from '@/api/computingConfig.js';
export default {
    name: "RelationFilesDialog",
    data() {
        return {
            title: '设置依据性文件',
            dialogVisible: false,
            formInline: {
                fileCode: "",
                fileName: "",
            },
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            loading: false,
            total: 0,
            tableData: [],
            multipleSelection: []
        };
    },
    methods: {
        async show() {
            this.dialogVisible = true;
            const tableId = this.$store.state.xmleditor.variableAtt;
            await loadVaribles({ docNo: this.$store.state.xmleditor.docInfo.docNo, ids: [tableId?.variableId] }).then(res => {
                if (res?.data) {
                    this.tableData = res?.data[0]?.variableContent || [];
                }
            })
        },
        handleClose() {
            this.dialogVisible = false;
        },
        // 添加文件信息
        async addFile() {
            if (!this.formInline.fileCode) {
                this.$message.warning('请填写文件编号！');
                return;
            }
            if (!this.formInline.fileName) {
                this.$message.warning('请填写文件名称！');
                return;
            }
            let hasData = false;
            await this.tableData.forEach(item => {
                if (item.fileCode == this.formInline.fileCode) {
                    hasData = true;
                }
                if (item.fileName == this.formInline.fileName) {
                    hasData = true;
                }
            })
            if (hasData) {
                this.$message.warning('数据已经存在！');
                return;
            }
            this.tableData.push({ fileCode: this.formInline.fileCode, fileName: this.formInline.fileName });
            //清空form
            this.formInline.fileCode = "";
            this.formInline.fileName = "";
        },
        async handleConfirm() {
            if (!this.multipleSelection.length) {
                return this.$message.warning('请选择数据！')
            }
            const tableTitles = [ '文件编号', '文件名称']
            const tableAttrs = ['fileCode', 'fileName']
            const tableDatas = this.multipleSelection.map((item, index) => {
                item.index = index + 1
                return item
            })
            const tableId = this.$store.state.xmleditor.variableAtt;
            if (tableId?.dataId) {
                const doc = tinymce.activeEditor.getDoc();
                const nodes = doc.querySelector(`[data-id="${tableId?.dataId}"]`)
                let relationFilesDom = '';
                await tableDatas?.forEach((el, index) => {
                    let fileSpan = `<span style="padding-left:${index == 0 ? 0 : 0.9}cm;">${el.fileCode}&nbsp;&nbsp;&nbsp;&nbsp;${el.fileName}</span><br />`;
                    relationFilesDom += fileSpan;
                })
                nodes.innerHTML = relationFilesDom;
            }
            // 保存变量值
            const formData = new FormData();
            formData.append("docNo", this.$store.state.xmleditor.docInfo.docNo);
            formData.append("id", Number.parseInt(tableId?.variableId));
            formData.append("variableContent", JSON.stringify(tableDatas));
            saveVeriableValue(formData)
            this.dialogVisible = false;
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleDelete(data) {
            this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.tableData = this.tableData.filter(item => {
                    return item.fileCode != data.fileCode
                })
            })
        }
    }
}
</script>

<style scoped></style>